{% extends 'home_base.html' %}
{% load seahub_tags i18n %}
{% load url from future %}

{% block sub_title %}{% trans "Libraries - Share" %} - {% endblock %}

{% block cur_share_libs %}tab-cur{% endblock %}

{% block right_panel %}
<h3 class="hd">{% trans "Libraries" %}</h3>
{% if out_repos %}
<table>
    <tr>
        <th width="4%"><!--icon--></th>
        <th width="33%">{% trans "Name"%} <span id="shared-repo-list-name-down" class="icon-caret-up cspt"></span> <span id="shared-repo-list-name-up" class="icon-caret-down cspt hide"></span></th>
        <th width="30%">{% trans "Share To"%}</th>
        <th width="20%">{% trans "Permission"%}</th>
        <th width="13%">{% trans "Operations"%}</th>
    </tr>
    {% for repo in out_repos %}
    <tr data-repo_name="{{repo.props.repo_name}}" data-type="{{repo.props.share_type}}" data-repoid="{{ repo.props.repo_id }}" data-user="{{repo.props.user_info}}">
        {% if repo.encrypted %}
        <td><img src="{{MEDIA_URL}}img/sync-folder-encrypt-20.png" title="{% trans "Read-Write"%}" alt="{% trans "directory icon" %}" /></td>        
        {% else %}
        <td><img src="{{MEDIA_URL}}img/sync-folder-20.png?t=1387267140" title="{% trans "Read-Write"%}" alt="{% trans "directory icon" %}" /></td>        
        {% endif %}
        <td><a href="{% url 'view_common_lib_dir' repo.props.repo_id '' %}">{{ repo.props.repo_name }}</a></td>
        <td>{{ repo.props.user }}</td>
        <td>
            <div class="share-permission">
                <span class="share-permission-cur-value">{{ repo.share_permission }}</span>
                <img src="{{MEDIA_URL}}img/edit_12.png" alt="{% trans "Edit"%}" title="{% trans "Edit"%}" class="share-permission-edit-icon op-icon vh" />
            </div>
            <select name="permission" class="share-permission-select hide">
                <option value="{{ repo.props.permission }}" selected="selected">{{ repo.share_permission }}</option>
                {% if repo.props.permission == 'rw' %}
                <option value="r">{% trans "Read-Only"%}</option>
                {% else %}
                <option value="rw">{% trans "Read-Write"%}</option>
                {% endif %} 
            </select>
        </td>
        <td>
            {% if repo.props.share_type == 'group' %}
            <a href="{% url 'repo_remove_share' %}?repo_id={{ repo.props.repo_id }}&from={{ request.user.username|urlencode }}&gid={{ repo.props.group_id }}&permission={{ repo.props.permission }}" class="cancel-share op-icon vh" title="{% trans "Unshare"%}"><img src="{{MEDIA_URL}}img/rm.png" alt="" /></a>
            {% endif %}
            {% if repo.props.share_type == 'personal' %}
            <a href="{% url 'repo_remove_share' %}?repo_id={{ repo.props.repo_id }}&from={{ request.user.username|urlencode }}&to={{ repo.props.user|urlencode }}&permission={{ repo.props.permission }}" class="cancel-share op-icon vh" title="{% trans "Unshare"%}"><img src="{{MEDIA_URL}}img/rm.png" alt="" /></a>
            {% endif %}
            {% if repo.props.share_type == 'public' %}
            <a href="{% url 'unsetinnerpub' repo.repo_id %}?permission={{ repo.props.permission }}" class="cancel-share op-icon vh" title="{% trans "Unshare"%}"><img src="{{MEDIA_URL}}img/rm.png" alt="" /></a>
            {% endif %}
        </td>
    </tr>
    {% endfor %}
</table>
{% else %}
<div class="empty-tips">
    <h2 class="alc">{% trans "You have not shared any library" %}</h2>
    <p>{% trans "You can share libraries to your friends and colleagues by clicking the share icon of your own libraries in your home page or creating a new library in groups you are in." %}</p>
</div>
{% endif %}
{% endblock %}

{% block extra_script %}{{block.super}}
<script type="text/javascript">
{% if out_repos %}
$('.share-permission-edit-icon').click(function() {
    var cur_perm = $(this).parent(),
        perm_select = cur_perm.next();
    cur_perm.addClass('hide');
    perm_select.removeClass('hide'); // show 'share-permission-select'
});
$('.share-permission-select').change(function() {
    var select = $(this),
        cur_perm = select.prev(),
        share_item = select.parents('tr'),
        share_type = share_item.data('type'),
        share_repoid = share_item.data('repoid'),
        share_user = share_item.data('user');

    var url = '{% url 'share_permission_admin' %}?share_type=' + share_type;

    $.ajax({
        url: url,
        type: 'POST',
        dataType: 'json',
        cache: false,
        beforeSend: prepareCSRFToken,
        data: {
            repo_id: share_repoid,
            email_or_group: share_user,
            permission: select.val()
        },
        success: function(data) {
            if (data['success']) {
                feedback("{% trans "Edit succeeded" %}", 'success');
                cur_perm.children('.share-permission-cur-value').html(select.children('option[value="' +select.val() + '"]').text());
            }
            select.addClass('hide');
            cur_perm.removeClass('hide');
        },
        error: function() {
            feedback("{% trans "Edit failed." %}", 'error');
            select.addClass('hide');
            cur_perm.removeClass('hide');
        }   
    });
});
// select shows, but the user doesn't select a value, or doesn't change the permission, click other place to hide the select
$(document).click(function(e) {
    var target = e.target || event.srcElement;
    // target can't be edit-icon
    if (!$('.share-permission-edit-icon, .share-permission-select').is(target)) {
        $('.share-permission').removeClass('hide');
        $('.share-permission-select').addClass('hide');
    }
});
{% endif %}                     // shared_repos
{% include "snippets/sort_lib_js.html" %}
</script>
{% endblock %}
